<template>
    <div class="zhuce">
        <h1>用户注册</h1>
        <div class="box">
           <input type="text" placeholder="手机/用户名" v-model="from.phone">
        </div>
        <div class="box">
           <input type="password" placeholder="密码" v-model="from.pass">
        </div>
        <div class="box">
           <input type="password" placeholder="确认密码" v-model="from.dbpass">
        </div>
        <div class="button">
           <button  @click="button_click" >注册</button>
        </div>
        <div class="footer">
            <router-link to="/login">已有账号去登陆</router-link>
        </div>
    </div>
</template>

<script>
import { api_user_register} from '../dmh/ulits/api'
export default {
    data(){
        return{
            from:{phone:null,pass:null,dbpass:null}
        }
    },
    methods:{
        button_click(){  
            if (this.from.phone && this.from.pass) {//为空校验
                if (this.from.pass == this.from.dbpass) {//两次密码一致校验
                    //发送请求
                    api_user_register({ phone: this.from.phone, pass: this.from.pass }).then((res) => {
                        console.log(res);
                        if (res.data.code == 200) {
                            alert('注册成功')
                            this.$router.push('/login')  //直接跳转到登录页面
                        } else if (res.data.code == 400) {
                            alert('该手机号已注册,无需重复注册!')
                        }
                    })
                } else {
                    alert('两次密码不一致')
                }
            } else {
                alert('账号密码不能为空')
            }
        }
    }

}
</script>

<style scoped>
 *{
  margin: 0;
  padding: 0;
}
a{
  text-decoration: none;
  color: black;
}
html,body{
  width: 100%;
  height: 100%;
}
.zhuce{
  padding: 20px;
}
h1{
    padding-top:100px;
}
.box{
    width: 100%;
    height: 80px;
}
input{
    width: 90%;
    height: 60px;
    border: none;
    padding-left: 10px;
    outline: none;
    border-bottom: 1px solid #ccc;
    font-size: 20px;
}
.button{
    width: 100%;
    height: 80px;
    text-align: center;
}
button{
    width: 80%;
    height: 45px;
    border-radius: 45px;
    border: none;
    background-color: #ccc;
}
.footer{
    display: flex;
    justify-content: space-between;
}
</style>